<!-- 
  @description select-element
  @author cjs
  @date 2021-07-17 10:03:38
-->
<template>
	<div class="operate_container">
		<div v-for="(item, index) in searchList"
		  :key="index"
		  class="operate_item">
      <div class="operate_left">{{ item.label }}</div>
      <div class="operate_right">
        <template v-if="item.slotName && $scopedSlots[item.slotName]">
          <slot
            :name="item.slotName"
            :scope="search"
          ></slot>
        </template>
        <template v-else>
          <template v-if="item.element === 'el-input'">
            <el-input
              v-model="search[item.code]"
              v-blurTrim
              placeholder="请输入"
              clearable
            />
          </template>
          <template v-if="item.element === 'el-select'">
            <el-select v-model="search[item.code]" clearable filterable>
              <el-option v-for="(item, index) in searchObj[item.code]"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </template>
      </div>
    </div>
    <div class="operate_item" style="width: auto;">
      <div class="operate_right">
        <el-button type="primary" @click="searchFunc">搜 索</el-button>
        <el-button @click="resetFunc">重 置</el-button>
      </div>
    </div>
	</div>
</template>
<script>
export default {
  props: {
    searchList: {
      type: Array,
      default() {
        return [];
      }
    },
    searchData: {
      type: Object,
      default() {
        return {};
      }
    },
    initSearchData: {
      type: Object,
      default() {
        return {};
      }
    },
    searchObj: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      search: {}
    };
  },
  watch: {
    searchData: {
      deep: true,
      handler() {
        this.search = {
          ...this.searchData
        };
      }
    }
  },
  mounted() {
    this.search = {
      ...this.searchData
    };
  },
  methods: {
    /**
     * @name searchFunc
     * @description 查询方法
     * @param {}
     * @author cjs
     * @date 2021-07-17 10:11:39
     */
    searchFunc() {
      this.$emit("search", this.search);
    },
    /**
     * @name resetFunc
     * @description 重置方法
     * @param {}
     * @author cjs
     * @date 2021-07-17 10:12:01
     */
    resetFunc() {
      this.$emit("reset", this.initSearchData);
    }
  }
};
</script>
<style lang="scss" scoped>
.operate_item {
  /deep/ {
    .el-input, .el-select {
      width: 185px;
    }
  }
}
</style>